@extends('layouts.layout')

@section('header')

    <title>我的订单</title>

    <link rel="stylesheet" type="text/css" href="{{URL::asset('static/css/my_order.css')}}"/>
    <link rel="stylesheet" type="text/css" href="{{URL::asset('static/css/swiper.min.css')}}"/>

@endsection

@section('content')
    <!-- header -->
    <header class="favor-header-bar">
        <ul class="tabs">
            <li class="default"><a href="javascript:void(0);" id="btn1" hidefocus="true">全部</a></li>
            <li>
                <a href="javascript:void(0);" id="btn2" hidefocus="true">待付款</a>
            </li>
            <li>
                <a href="javascript:void(0);" id="btn3" hidefocus="true">待发货</a>
            </li>
            <li>
                <a href="javascript:void(0);" id="btn4" hidefocus="true">待收货</a>
            </li>
        </ul>
    </header>
    <!-- slideTo tab -->
    <div class="main">
        <div class="swiper-container favor-list">
            <div class="swiper-wrapper">

                <div class="swiper-slide">
                    <ul class="list">
                        @isset($all)
                            @foreach($all as $data)
                                <li class="shadow">
                                    <div class="status">
                                        @if ($data->status === 1)
                                            <span>待付款</span>
                                        @elseif ($data->status === 2)
                                            <span>待发货</span>
                                        @elseif ($data->status === 3)
                                            <span>已发货</span>
                                        @elseif ($data->status === 4)
                                            <span>已完成</span>
                                        @elseif ($data->status === 5)
                                            <span>已取消</span>
                                        @elseif ($data->status === 6)
                                            <span>已退款</span>
                                        @else
                                            <span>已失效</span>
                                        @endif
                                    </div>
                                    <a href="javaScript:;" class="clearfix">
                                        <div class="pull-left"><img src="{{URL::asset('uploads/'.$data->goods_cover)}}">
                                        </div>
                                        <div class="pull-left">
                                            <p class="ellipsis"> {{ $data->goods_name }}</p>
                                            <span>￥{{ $data->goods_prices }}</span>
                                        </div>
                                        <div class="addBox">
                                            数量：{{ $data->goods_num }}
                                        </div>
                                    </a>

                                    @if ($data->status === 2)
                                        <div class="price received"><span class="wx">添加<i>售后微信</i>，分享得{{ $reward }}%佣金</span><span>总价：￥{{ $data->prices }}</span></div>
                                    @else
                                        <div class="price"><span>总价：￥{{ $data->prices }}</span></div>
                                    @endif

                                    @if ($data->status === 1)
                                        <div class="edit">
                                            <button type="button" class="cancel quxiao" data-id="{{ $data->order_sn }}">取消订单</button>
                                            <button type="button" class="toPay fukuan" data-id="{{ $data->order_sn }}">付款</button>
                                        </div>
                                    @endif
                                </li>
                            @endforeach
                        @endisset
                    </ul>
                </div>
                <div class="swiper-slide margin19">
                    <ul class="list" style="margin-top: .3rem;">

                        @isset($wait)
                            @foreach($wait as $data)
                                <li class="shadow">
                                    <a href="javaScript:;" class="clearfix">
                                        <div class="pull-left"><img src="{{URL::asset('uploads/'.$data->goods_cover)}}">
                                        </div>
                                        <div class="pull-left">
                                            <p class="ellipsis"> {{ $data->goods_name }}</p>
                                            <span>￥{{ $data->goods_prices }}</span>
                                        </div>
                                        <div class="addBox">
                                            数量：{{ $data->goods_num }}
                                        </div>
                                    </a>
                                    <div class="price"><span>总价：￥{{ $data->prices }}</span></div>
                                    <div class="edit">

                                        <button type="button" class="cancel quxiao" data-id="{{ $data->order_sn }}">取消订单</button>
                                        <button type="button" class="toPay fukuan" data-id="{{ $data->order_sn }}">付款</button>
                                    </div>
                                </li>
                            @endforeach
                        @endisset

                    </ul>
                </div>
                <div class="swiper-slide">
                    <ul class="list finash" style="margin-top: .3rem;">

                        @isset($waitSend)
                            @foreach($waitSend as $data)
                                <li class="shadow">
                                    <a href="javaScript:;" class="clearfix">
                                        <div class="pull-left"><img src="{{URL::asset('uploads/'.$data->goods_cover)}}">
                                        </div>
                                        <div class="pull-left">
                                            <p class="ellipsis"> {{ $data->goods_name }}</p>
                                            <span>￥{{ $data->goods_prices }}</span>
                                        </div>
                                        <div class="addBox">
                                            数量：{{ $data->goods_num }}
                                        </div>
                                    </a>
                                    <div class="price received"><span class="wx">添加<i>售后微信</i>，分享得{{ $reward }}%佣金</span><span>总价：￥{{ $data->prices }}</span></div>
                                </li>
                            @endforeach
                        @endisset


                    </ul>
                </div>
                <div class="swiper-slide">
                    <ul class="list finash" style="margin-top: .3rem;">
                        @isset($waitOver)
                            @foreach($waitOver as $data)
                                <li class="shadow">
                                    <a href="javaScript:;" class="clearfix">
                                        <div class="pull-left"><img src="{{URL::asset('uploads/'.$data->goods_cover)}}">
                                        </div>
                                        <div class="pull-left">
                                            <p class="ellipsis"> {{ $data->goods_name }}</p>
                                            <span>￥{{ $data->goods_prices }}</span>
                                        </div>
                                        <div class="addBox">
                                            数量：{{ $data->goods_num }}
                                        </div>
                                    </a>
                                    <div class="price"><span>总价：￥{{ $data->prices }}</span></div>
                                    <div class="edit">
                                        <button type="button" class="cacle copy" data-val="{{ $data->courier_sn }}" style="width:auto;">复制物流单号</button>
                                        <button type="button" class="toPay confirmDo" data-id="{{ $data->order_sn }}">确认收货</button>
                                    </div>
                                </li>
                            @endforeach
                        @endisset
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="chatCode" style="display: none;">
    	<img src="{{URL::asset('static/img/chatcode.jpg')}}" alt="">
    </div>

    <style type="text/css">
        .layui-m-layerbtn span[yes] {
            color: #d00000;
        }
    </style>

@endsection

@section('script')
    <script src="{{URL::asset('static/js/swiper.min.js')}}"></script>
    <script src="{{URL::asset('static/js/idangerous.swiper.min.js')}}"></script>
    <script src="{{URL::asset('static/js/layer/layer.js')}}"></script>
    <script src="{{URL::asset('static/js/layer/mobile/layer.js')}}"></script>
    <script type="text/javascript">

    // 添加微信
    $('.wx').click(function(){
    	layer.open({
    	  title: [
    	    '售后微信',
    		'height:40px'
    	  ]
    	  ,anim: 'up'
    	  ,content: $(".chatCode").html()
    	  ,btn: ['确认']
    	  ,yes: function(){
    		  layer.closeAll()
    	  }
    	});
    })

        // 取消订单
        $('.quxiao').click(function () {
            var sn = $(this).attr('data-id');
            layer.open({
                content: '确定要取消订单吗？'
                , btn: ['确定', '取消']
                , yes: function (index) {
                    commonAjax({type: "post", url: '/order/cancel/'+sn}, function (msg) {
                        setTimeout(function(){
                            layer.open({
                                content: '取消成功'
                                ,skin: 'msg'
                                ,time: 1
                                ,end:function(){
                                    window.location.reload()
                                }
                              });
                        })
                    })
                }
            });
        })
        // 付款
        $('.fukuan').click(function () {
            layer.open({type: 2});
            var sn = $(this).attr('data-id');
            var data = {
                order_sn: sn
            }
            commonAjax({type: "post", url: '/order/goPay', data}, function (msg) {
                var msg1 = msg
                WeixinJSBridge.invoke(
                    'getBrandWCPayRequest', {
                        "appId": msg1.appId,
                        "timeStamp": msg1.timeStamp,
                        "nonceStr": msg1.nonceStr,
                        "package": msg1.package,
                        "signType": "MD5",
                        "paySign": msg1.paySign
                    },
                    function (res) {
                        // console.log(res)
                        window.location.reload()
                    })
            })
        })

        // 复制单号
        $('.copy').click(function(){
            var val = $(this).attr("data-val")
            if(val){
                copyText(val)
            }else{
                copyText("")
            }

        })
        function copyText(text) {
            var oInput = document.createElement('input');
            oInput.value = text;
            document.body.appendChild(oInput);
            oInput.select(); // 选择对象
            document.execCommand("Copy"); // 执行浏览器复制命令
            oInput.className = 'oInput';
            oInput.style.display='none';
            layer.open({
                content: '复制成功!'
                ,skin: 'msg'
                ,time: 1
              });
        }


        var mySwiper = new Swiper('.swiper-container', {
            autoHeight: true,
            onSlideChangeStart: function () {
                $(".tabs .default").removeClass('default');
                $(".tabs li").eq(mySwiper.activeIndex).addClass('default');
            }
        });
        if (sessionStorage.getItem("swiperIndex")) {
            mySwiper.swipeTo(sessionStorage.getItem("swiperIndex"));
        }
        $(".tabs li").on('click', function (e) {
            e.preventDefault();
            $(".tabs .default").removeClass('default');
            $(this).addClass('default');
            mySwiper.swipeTo($(this).index());
            sessionStorage.setItem("swiperIndex", $(this).index())
        });
        $(".tabs li").click(function (e) {
            e.preventDefault();
        });


        var orderIndex = sessionStorage.getItem('orderIndex')
        if (orderIndex) {
            $('.tabs li').eq(1).trigger('click')
        }
        window.onunload = function () {
            if (sessionStorage.getItem('orderIndex')) {
                sessionStorage.removeItem('orderIndex')
                sessionStorage.removeItem("swiperIndex")
            }
        }

        // 确认收货
        $('.confirmDo').click(function () {
            var that = $(this)
            var sn = that.attr('data-id');
            layer.open({
                content: '确定已经收到货了吗？'
                , btn: ['确定', '取消']
                , yes: function (index) {
                    commonAjax({type: "post", url: '/order/confirm/'+sn}, function (msg) {
                        layer.open({
                            content: '确认收货!'
                            , skin: 'msg'
                            , time: 1
                            ,end:function(){
                                window.location.reload()
                            }
                        });
                    })
                }
            });
        })

        // 返回进来 刷新页面
        $(function () {
            var isPageHide = false;
            window.addEventListener('pageshow', function () {
                if (isPageHide) {
                    window.location.reload();
                }
            });

            window.addEventListener('pagehide', function () {
                isPageHide = true;
            });
        })
    </script>

@endsection
